<template>
  <BasicVxeModal
    v-bind="$attrs"
    :title="title"
    :show-footer="false"
    :show-maximize="false"
    :mask-closable="true"
    :position="{ top: '10vh' }"
    @register="registerModal"
  >
    <div style="text-align: center">
      <div style="display: flex; align-items: center">
        <div>姓名:{{ reactData.firstName }}</div>
        <div style="margin-left: 40px">员工号:{{ reactData.employeeCode }}</div>
      </div>
      <img style="width: 90%" :src="reactData.imgUrl" alt="" />
    </div>
  </BasicVxeModal>
</template>

<script setup lang="ts">
  import { useVxeModalInner } from '@/components/ui/vxe-modal'
  import { GetTicket, type GetUserListResult } from '@/api/persondocument'

  defineEmits(['confirm', 'register'])

  const title = ref('绑定微信公众号')
  const reactData = ref<GetUserListResult & { imgUrl: string }>({} as any)

  // 绑定公众号
  const bangDing = async (row) => {
    await GetTicket({
      UserID: row.id
    })
      .then((res) => {
        reactData.value.imgUrl = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + res
      })
      .catch((error) => {
        console.log(error)
      })
  }

  const [registerModal, { setModalProps }] = useVxeModalInner(async (_data) => {
    try {
      setModalProps({ confirmLoading: true, loading: true })
      const { row } = _data
      reactData.value = row
      await bangDing(row)
    } catch (error) {
      console.log(error)
    } finally {
      setModalProps({ confirmLoading: false, loading: false })
    }
  })
</script>

<style lang="scss" scoped></style>
